<template>
    <view class="content">
        <view class="bg_color"></view>
       <view class="title">
           个人中心
       </view>
       <view class="box">
           <view class="search">
               <image src="/static/images/搜索.png" mode="aspectFit"></image>
               <input type="text" placeholder="搜索房源" class="search-input" />
           </view>
           <view class="total">
               <view class="total_item1">
                   统计
               </view>
               <view class="totaldata">
                   180
               </view>
               <view class="total_item2">
                   总房源
               </view>
           </view>
           
       </view>
    </view>
</template>

<script setup>
    
</script>

<style lang="scss" scoped>
      .content{
          .bg_color {
              width: 750rpx;
              height: 400rpx;
              z-index: 1;
              background-color: rgba(79, 129, 240, 1);
          }
              .title {
                  position: absolute;
                  top: 109rpx;
                  left: 311rpx;
                  width: 128rpx;
                  height: 45rpx;
                  font-size: 32rpx;
                  z-index: 10;
                  color: rgba(255, 255, 255, 1);
              }
              .box{
                  display: flex;
                  flex-direction: column;
                  width: 686rpx;
                  height: 1086rpx;
                  margin-top: -200rpx;
                  padding-top: 24rpx;
                  border-radius: 20rpx;
                  margin-left: 32rpx;
                  background-color: rgba(187, 187, 187, 1);
                  .search {
                      position: relative;
                      display: flex;
                      align-items: center;
                      width: 618rpx;
                      height: 56rpx;
                      border-radius: 100rpx;
                      padding: 16rpx 34rpx;
                      margin-bottom: 24rpx;
                      gap: 17rpx;
                      background-color: rgba(247, 247, 247, 1);
                  
                      .search-input {
                          width: 686rpx;
                          height: 88rpx;
                          font-size: 26rpx;
                          line-height: 100%;
                  
                      }
                  
                      image {
                          width: 35rpx;
                          height: 32rpx;
                          opacity: 80%;
                      }
                  }
                  .total{
                    display: flex;
                    width: 186rpx;
                    height: 40rpx;
                    margin-left: 660rpx;
                    gap: 12rpx;
                .total_item1{
                    font-size: 32rpx;
                    width: 48rpx;
                    height: 32rpx;
                    border: 2rpx solid rgba(255, 255, 253, 1);
                    opacity: 80%;
                }
                .totaldata{
                    width: 42rpx;
                    height: 40rpx;
                    font-size: 40rpx;
                    font-weight: 600;
                    line-height: 40rpx;
                    
                }
                .total_item2{
                    font-size: 32rpx;
                    width: 72rpx;
                    height: 32rpx;
                    opacity: 80%;
                    border: 2rpx solid rgba(255, 255, 253, 1);

                }
                  }
              }
          
          
          
      }  
</style>
